<template>
  <div class="pin-box">
    <header>
      <div class="pin-left">
        <a href="#" style="cursor: default">一级商品分类列表</a>
        <p
          href="#"
          v-show="!state"
          @click="back"
          style="display: inline-block; cursor: pointer; color: orange"
        >
          > 返回上一层
        </p>
      </div>

      <el-button class="pin-right" type="text" @click="open"
        >+ 添加分类</el-button
      >
    </header>

    <article>
      <table style="border-collapse: collapse; border: 1px solid #ccc" border>
        <thead>
          <td style="width: 900px; height: 47.4px">商品分类</td>
          <td>操作选项</td>
        </thead>
        <tbody>
          <tr v-for="(val, i) in SGRes.list" :key="val.list">
            <td>{{ val.name }}{{ i }}</td>
            <td>
              <button size="mini" @click="lookDate" :index="i" v-show="state">
                查看子分类
              </button>
              <button size="mini" @click="uptateDate">修改分类</button>
            </td>
          </tr>
        </tbody>
      </table>
    </article>

    <!-- 尾部分页器部分 -->
    <footer>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="5"
        @current-change="handleCurrentChange"
        :current-page="SGReq.pageNum"
      >
      </el-pagination>
    </footer>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
import addClass from "../../api/addClass";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      state: true,
      //总共存在的数据
      total: 0,
      // 发送的父类请求
      SGReq: {
        parentId: "0",
        pageNum: 1,
        pageSize: 5,
      },
      //发送的子类请求
      SGReqSmall: {
        parentId: "",
        pageNum: 1,
        pageSize: 5,
      },
      //发送添加的请求
      SGReqAdd: {
        parentId: "0",
        categoryName: "",
      },
      //响应回来的数据
      SGRes: {},
    };
  },
  computed: {},
  methods: {
    ...mapActions(["getSDate"]),
    ...mapState({
      Pdate: (state) => state.home.date,
    }),

  // 分页器获取数据渲染
    handleCurrentChange(index) {
      this.SGReqAdd.parentId = "0";
      this.SGReq.pageNum = index;
      this.getSDate(this.SGReq).then((a) => {
        this.SGRes = a.data.data;
      });
    },

    //查看子分类获取数据渲染
    lookDate(event) {
      let a = event.target.getAttribute("index");
      this.SGReqSmall.parentId = this.SGRes.list[a]._id;
      this.SGReqAdd.parentId = this.SGRes.list[a]._id;
      this.SGReqSmall.pageNum = 1;
      this.getSDate(this.SGReqSmall).then((a) => {
        this.SGRes = a.data.data;
        this.total = a.data.data.total;
        this.state = false;
      });
    },
    //返回上一层获取数据渲染
    back() {
      this.getSDate(this.SGReq).then((a) => {
        this.SGRes = a.data.data;
        this.state = true;
        this.total = a.data.data.total;
      });
    },

    //更新数据 （没有做）
    uptateDate() {
      // 不想做，我是个弟弟
    },
    
    //添加类发送请求，重新渲染数据
    open() {
      this.$prompt("类名", "修改类名", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /.+/,
        inputErrorMessage: "格式不正确",
      }).then(({ value }) => {
          this.SGReqAdd.categoryName = value;
          addClass(this.SGReqAdd);
          if (this.SGReqAdd.parentId == 0) {
              this.getSDate(this.SGReq).then((a) => {
               this.SGRes = a.data.data;
               this.total = a.data.data.total;
            })
          } else {
            this.getSDate(this.SGReqSmall).then((a) => {
        this.SGRes = a.data.data;
        this.total = a.data.data.total;
        this.state = false;
      });
          }
          this.$message({
            type: "success",
            message: "你已经添加类: " + value,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已经取消输入",
          });
        });
    },
  },
  mounted() {
    
    //初始化数据渲染
    this.getSDate(this.SGReq).then((a) => {
      this.SGRes = a.data.data;
    }),

    //初始化分页器的个数
      this.getSDate().then((a) => {
        this.total = a.data.data.total;
      });
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/pinleiguanli.css";
</style>